<template>
  <div class="box">
    <div class="box_item">
      <div class="left">
        <div class="tu1"></div>
        <div class="tu2"></div>
      </div>
      <div class="right">
        <div class="right_item">
          <div class="item1">
            <div class="tu1"></div>
            <div class="wen">欢迎登录</div>
          </div>
          <div class="item2">
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              status-icon
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
            >
              <el-form-item label="" prop="username">
                <el-input
                  v-model="ruleForm.username"
                  type="username"
                  autocomplete="off"
                  placeholder="用户名"
                  class="inp1"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon"><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input v-model.number="ruleForm.password" placeholder="密码" class="inp2">
                  <template #prefix>
                    <el-icon class="el-input__icon"><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <div
                :style="{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  height: '60px'
                }"
              >
                <div>
                  <el-checkbox v-model="checked1" label="记住密码" size="large" />
                </div>
                <div :style="{ color: '#3f5fc6' }">忘记密码</div>
              </div>
              <el-form-item class="btnbox">
                <el-button @click="resetForm(ruleFormRef)" :icon="CircleCheck">重置 </el-button>
                <el-button
                  type="primary"
                  @click="submitForm(ruleFormRef)"
                  :icon="Avatar"
                  :loading="loading"
                >
                  登录
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { getlogin } from '../request/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/counter'
import { Calendar, Search, User, Lock, CircleCheck, Avatar } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
//复选框
const loading = ref(false)
const router = useRouter()
const checked1 = ref(false)
const ruleFormRef = ref<FormInstance>()
//姓名
const checkusername = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入用户名'))
  }
}
//密码
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请输入密码'))
  }
}
//内容
const ruleForm = reactive({
  username: '',
  password: ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: checkusername, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }]
})
//仓库
const store = useAuthStore()
console.log(store)

//提交
const submitForm = (formEl: FormInstance | undefined) => {
  loading.value = true
  console.log(ruleForm)
  // axios({
  //   url: '/admin/user/login',
  //   method: 'post',
  //   data: ruleForm
  // }).then((res) => {
  //   console.log(res, '二次登录信息')
  // })
  // console.log(ruleForm)
  getlogin(ruleForm)
    .then((res) => {
      console.log(res)
      if (checked1.value) {
        localStorage.setItem('ruleForm', JSON.stringify(ruleForm))
      } else {
        localStorage.setItem('ruleForm', JSON.stringify({}))
      }
      if (res.data.code == 200) {
        ElMessage.success('登录成功')
        loading.value = false
        router.push('/home/index').then(() => window.location.reload())
        store.getinfo({
          token: res.data.token,
          user: res.data.user,
          rolename: res.data.rolename,
          auths: res.data.auths
        })
      }
      // localStorage.setItem('token', res.data.token)
      // localStorage.setItem('rolename', res.data.rolename)
      // localStorage.setItem('user', JSON.stringify(res.data.user))
      // localStorage.setItem('auths', JSON.stringify(res.data.auths))
    })
    .catch((err) => {
      ElMessage.error('登录失败')
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//页面加载记住密码
onMounted(() => {
  if (localStorage.getItem('ruleForm') != null) {
    checked1.value = true
    var form = JSON.parse(localStorage.getItem('ruleForm'))
    ruleForm.username = form.username
    ruleForm.password = form.password
  } else {
    checked1.value = false
  }
  window.addEventListener('keyup', onkeyup)
})
//监听事件
const onkeyup = (e: any) => {
  if (e.key == 'Enter') {
    submitForm()
  }
}
//移出监听事件
onBeforeUnmount(() => {
  window.removeEventListener('keyup', onkeyup)
})
</script>


<style lang='scss'>
.box {
  width: 100%;
  height: 100%;
  background: url('../assets/images/bg.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 20px;
}
.box_item {
  margin: 20px;
  width: 97%;
  height: 95%;
  background: #fff;
  z-index: 111;
  opacity: 0.9;
  display: flex;
  border-radius: 16px;
  .left {
    width: 55%;
    height: 100%;
    .tu1 {
      margin: 50px 0px 30px 90px;
      width: 300px;
      height: 110px;
      background: url('/src/assets/images/title.png') no-repeat;
      background-size: 100% 100%;
    }
    .tu2 {
      margin-left: 60px;
      width: 95%;
      height: 700px;
      background: url('/src/assets/images/login.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
.right_item {
  margin-top: 150px;
  margin-left: 160px;
  width: 550px;
  height: 700px;
  border-radius: 10px;
  box-shadow: 3px 3px 16px 5px rgba(194, 191, 191, 0.6);
  .item1 {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    .tu1 {
      width: 70px;
      height: 50px;
      margin-right: 30px;
      background: url('../assets/images/logo.png') no-repeat;
      background-size: 100% 100%;
    }
    .wen {
      font-weight: bolder;
      font-size: 32px;
      color: #3f5fc6;
    }
  }
}
.item2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inp1 {
  width: 400px;
  height: 43px;
  margin: 20px 20px 10px 20px;
}
.inp2 {
  width: 400px;
  height: 43px;
  margin: 10px 20px 10px 20px;
}
.btnbox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  .el-button {
    width: 140px;
    height: 40px;
    margin-left: 60px;
    border-radius: 20px;
  }
}
</style>
